{include file="public/layout" /}
<body class="laytp-container">
<div class="layui-card" id="search-form">
    <div class="layui-card-header">{:t('会员')}关系图
        {if input('param.isopen')==1}<i class="layui-icon layui-icon-close" style="font-size:18px;font-weight:bold;cursor:pointer" onclick="closeself()"></i>{/if}
    </div>
    <div class="layui-card-body">
        <div class="layui-form layui-col-md12">
            <div class="layui-inline">
                <label class="layui-form-label" >会员编号：</label>
                <div class="layui-input-block" style="">
                    <input type="text" name="username" value="{$Request.param.username}" autocomplete="off" class="layui-input" placeholder="输入会员编号查看">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-primary" onclick="getuserchart()">查看</button>
                <button class="layui-btn layui-btn-primary layuiadmin-btn-list" onclick="getnextchart()">上一层</button>
            </div>
        </div>
        <div id="treeChart" style="width: 100%;height:600px;padding-top: 20px;"></div>
    </div>
</div>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script type="text/javascript" src="/static/admin/js/echarts5.5.1.min.js"></script>
<script>
    var $ = layui.jquery;
    var myChart = echarts.init(document.getElementById('treeChart'));
    var option = {};
    function getuserchart(){
        var username = $('input[name="username"]').val();
        console.log(username);
        getchart(username);
    }
    function getnextchart(){
        var username = $('input[name="username"]').val();
        console.log(username);
        $.ajax({
            url: '/admin/users/getuserinfo',
            type: 'GET',
            data:{username:username},
            success: function(res) {
                var user = res.user;
                if(user.tjr_name){
                    $('input[name="username"]').val(user.tjr_name);
                    getchart(user.tjr_name);
                }else{
                    layer.msg('没有上一层了');
                }
            }
        })
    }
    getchart();
    // 加载会员网体数据
    function getchart(username=''){

        $.ajax({
            url: '/admin/users/tjnet',
            type: 'GET',
            data:{username:username},
            success: function(res) {
                if(res.status === 1) {
                    option = {
                        tooltip: {
                            trigger: 'item',
                            triggerOn: 'mousemove',
                            formatter: function(params) {
                                //console.log(params);
                                var data = params.data;
                                return '会员ID: ' + data.user_id + '<br/>' +
                                    '会员编号: ' + data.username + '<br/>' +
                                    '昵称: ' + data.nickname + '<br/>' +
                                    '层级: ' + data.depth + '<br/>' +
                                    (data.head_pic ? '<img src="' + data.head_pic + '" style="width:50px;height:50px;border-radius:50%;"/>' : '');
                            }
                        },
                        series: [{
                            type: 'tree',
                            data: [res.data],
                            left: '2%',
                            right: '2%',
                            top: '8%',
                            bottom: '20%',
                            layout: 'orthogonal',
                            orient: 'TB',
                            symbol: function(params) {
                                return params?.data?.head_pic ? 'image://' + params.data.head_pic : 'circle';
                            },
                            symbolSize: 30,
                            initialTreeDepth: -1,
                            lineStyle: {
                                color: '#2f4554',
                                width: 1,
                                curveness: 0.5
                            },
                            label: {
                                position: 'top',
                                distance: 5,
                                formatter: function(params) {
                                    //console.log(params);
                                    return params.data.nickname + '\nID:' + params.data.user_id;
                                },
                                rotate: 0,
                                verticalAlign: 'middle',
                                align: 'center'
                            },
                            roam:true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                        }]
                    };
                    myChart.setOption(option);

                    // 响应式处理
                    window.addEventListener('resize', function() {
                        myChart.resize();
                    });
                }else{
                    layui.layer.msg(res.msg, {icon: 2, time: 2000});
                }
            }
        });
    }
    myChart.setOption(option);
    
    // 响应式处理
    window.addEventListener('resize', function() {
        myChart.resize();
    });
</script>
</body>
</html>